import 'package:flutter/material.dart'
    hide RefreshIndicator, RefreshIndicatorState;
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:kuwo_music/config.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';

import 'gif_refresher.dart';

class HomeIndexRecommend extends StatefulWidget {
  HomeIndexRecommend({Key key}) : super(key: key);

  @override
  _HomeIndexRecommendState createState() => _HomeIndexRecommendState();
}

class _HomeIndexRecommendState extends State<HomeIndexRecommend> {
  RefreshController _controller = RefreshController();
  var loadList = [
    {
      'title': '音乐片段单行标题一行三个',
      'type': 0,
      'list': [
        {
          'length': '10',
          'title': '片段标题最多两行字',
        },
        {
          'length': '11',
          'title': '片段标题最多两行字',
        },
        {
          'length': '12',
          'title': '片段标题最多两行字',
        },
      ],
      'count': '62.9w',
    },
    {
      'title': '音乐专辑歌单一行一个',
      'type': 1,
      'typeName': '有声读物',
      'count': '62.9w',
    },
    {
      'title': '视频还带封面也是两行',
      'type': 2,
      'author': '啦啦啦翻唱',
      'typeName': '视频',
      'count': '62.9w',
    },
  ];
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    var now = DateTime.now();
    var width = (MediaQuery.of(context).size.width - 20 - 3 * 5) / 3;
    var imageUrl = 'static/images/avator.jpeg';
    var cover1 = 'static/images/cover1.jpg';
    return RefreshConfiguration(
      headerTriggerDistance: 80,
      maxOverScrollExtent: 60,
      child: GifRefresher(
          controller: _controller,
          child: ListView(
            children: [
              // 轮播图
              Container(
                height: 150,
                child: Swiper(
                  itemBuilder: (BuildContext context, int index) {
                    return Stack(
                      children: [
                        Container(
                          height: 50,
                          decoration: BoxDecoration(color: Config.MainColor),
                        ),
                        Positioned.fill(
                          child: Container(
                            margin: EdgeInsets.symmetric(horizontal: 10),
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(5),
                              child: new Image.asset(
                                bannerList[index].bgurl,
                                fit: BoxFit.fill,
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          right: 10,
                          bottom: 0,
                          child: Container(
                            alignment: Alignment.center,
                            padding: EdgeInsets.symmetric(horizontal: 8),
                            child: Text(bannerList[index].typeName),
                            decoration: BoxDecoration(
                                color: Colors.grey[300],
                                borderRadius: BorderRadius.only(
                                    topLeft: Radius.circular(5),
                                    bottomRight: Radius.circular(5))),
                          ),
                        )
                      ],
                    );
                  },
                  itemCount: 3,
                  pagination: new SwiperPagination(),
                ),
              ),
              Padding(
                padding: EdgeInsets.only(top: 20),
              ),
              // tab导航
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: tabsList
                    .map((Tab tab) => Column(children: [
                          ClipOval(
                            child: Container(
                              width: 45,
                              height: 45,
                              decoration: BoxDecoration(color: tab.color),
                              child: Icon(
                                tab.icon,
                                color: Colors.white,
                              ),
                            ),
                          ),
                          Padding(padding: EdgeInsets.only(top: 5)),
                          Text(tab.title),
                        ]))
                    .toList(),
              ),
              // 推荐歌单
              CommonTitle(
                title: '推荐歌单',
                onTap: () {},
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    RecommondItem(width: width, now: now),
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(
                        width: width, imageUrl: imageUrl, count: '12.1万'),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(
                        width: width, imageUrl: imageUrl, count: '12.1万'),
                  ],
                ),
              ),
              // 热门电台
              CommonTitle(
                title: '热门电台',
                onTap: () {},
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    FMItem(width: width, cover1: cover1),
                    FMItem(width: width, cover1: 'static/images/cover2.jpg'),
                    FMItem(width: width, cover1: 'static/images/cover3.jpg'),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    FMItem(width: width, cover1: 'static/images/cover4.jpg'),
                    FMItem(width: width, cover1: 'static/images/cover5.jpg'),
                    FMItem(width: width, cover1: 'static/images/cover6.jpg'),
                  ],
                ),
              ),
              // 主播电台
              CommonTitle(
                title: '主播电台',
                onTap: () {},
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(
                        width: width, imageUrl: imageUrl, count: '12.1万'),
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                    NormalItem(
                        width: width, imageUrl: imageUrl, count: '12.1万'),
                  ],
                ),
              ),
              // 猜你喜欢
              Container(
                decoration: BoxDecoration(color: Colors.grey[100]),
                padding: EdgeInsets.symmetric(
                  vertical: 10,
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(
                      Icons.favorite,
                      color: Colors.orange,
                    ),
                    Padding(
                      padding: EdgeInsets.only(left: 10),
                      child: Text('猜你喜欢'),
                    )
                  ],
                ),
              ),
              // 下面随机添加
            ]..addAll(loadList.map((e) {
                switch (e['type']) {
                  case 0:
                    {
                      return FavoriteSong(width: width, imageUrl: imageUrl);
                    }
                  case 1:
                    {
                      return SingleLineItem();
                    }
                  case 2:
                    {
                      return VideoItem();
                    }
                  default:
                    {
                      return Container();
                    }
                }
              })),
          ),
          onRefresh: () async {
            print('refresh');
            await Future.delayed(Duration(milliseconds: 2000));
            _controller.refreshCompleted();
          },
          onLoading: () async {
            print('begin Load');
            // monitor network fetch
            await Future.delayed(Duration(milliseconds: 1000));
            print('after Load');
            setState(() {
              loadList.add(
                {
                  'title': '音乐专辑歌单一行一个',
                  'type': 1,
                  'typeName': '有声读物',
                  'count': '62.9w',
                },
              );
            });
            // if failed,use loadFailed(),if no data return,use LoadNodata()
            _controller.loadComplete();
          }),
    );
  }
}

class SingleLineItem extends StatelessWidget {
  const SingleLineItem({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        bottom: 10,
      ),
      decoration: BoxDecoration(color: Colors.grey[100]),
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(color: Colors.white),
        child: Row(
          children: [
            Container(
              margin: EdgeInsets.only(right: 10),
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5),
                  image: DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage(
                      'static/images/video_cover.jpg',
                    ),
                  )),
            ),
            Expanded(
              child: Column(
                children: [
                  Text('啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟',
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(fontSize: 18, letterSpacing: 2)),
                  InlineTypeItem(
                      inlineType: InlineType.video,
                      title: '无与伦比,为杰沉沦',
                      typeName: '视频',
                      count: '9999万'),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

class VideoItem extends StatelessWidget {
  const VideoItem({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        bottom: 10,
      ),
      decoration: BoxDecoration(color: Colors.grey[100]),
      child: Container(
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(color: Colors.white),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Stack(
              children: [
                Image.asset(
                  'static/images/video_cover.jpg',
                  fit: BoxFit.fill,
                  width: MediaQuery.of(context).size.width - 20,
                ),
                Positioned.fill(
                  child: Center(
                      child: Icon(
                    Icons.play_circle_outline,
                    color: Colors.white24,
                    size: 60,
                  )),
                ),
                Positioned(
                  child: Text(
                    '10:23',
                    style: TextStyle(color: Colors.white24),
                  ),
                  bottom: 5,
                  right: 5,
                )
              ],
            ),
            Text('啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟啦啦啦啦啦啦啦啦啦啦啦啦的视频名字哟',
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(fontSize: 18, letterSpacing: 2)),
            InlineTypeItem(
                inlineType: InlineType.video,
                title: '无与伦比,为杰沉沦',
                typeName: '视频',
                count: '9999万'),
          ],
        ),
      ),
    );
  }
}

class FavoriteSong extends StatelessWidget {
  const FavoriteSong({
    Key key,
    @required this.width,
    @required this.imageUrl,
  }) : super(key: key);

  final double width;
  final String imageUrl;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(
        left: 10,
        right: 10,
      ),
      decoration: BoxDecoration(color: Colors.white),
      margin: EdgeInsets.only(bottom: 15),
      child: Container(
        padding: const EdgeInsets.only(top: 10.0, bottom: 15),
        decoration: BoxDecoration(color: Colors.white),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                NormalItem(width: width, imageUrl: imageUrl, count: '9.9万'),
                NormalItem(width: width, imageUrl: imageUrl, count: '12.1万'),
              ],
            ),
            InlineTypeItem(
              inlineType: InlineType.recommond,
              typeName: '歌单',
            ),
          ],
        ),
      ),
    );
  }
}

enum InlineType { recommond, video, other }

class InlineTypeItem extends StatelessWidget {
  const InlineTypeItem({
    Key key,
    this.inlineType = InlineType.other,
    this.typeName,
    this.title,
    this.count,
  }) : super(key: key);
  final InlineType inlineType;
  final String typeName;
  final String title;
  final String count;
  @override
  Widget build(BuildContext context) {
    Color bgColor;
    String name = '';
    switch (inlineType) {
      case InlineType.other:
        {
          bgColor = Color(0xfff9f0cd);
          break;
        }
      case InlineType.video:
        {
          bgColor = Color(0xffe5dbf9);
          break;
        }
      case InlineType.recommond:
        {
          bgColor = Color(0xffccf2ce);
          name = '根据你喜欢的歌手推荐';
          break;
        }
      default:
        {
          bgColor = Color(0xffccf2ce);
        }
    }
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            margin: EdgeInsets.only(right: 10),
            padding: EdgeInsets.symmetric(horizontal: 5),
            decoration: BoxDecoration(color: bgColor),
            child: Text(
              '$typeName',
              style: TextStyle(color: Color(0xff769677)),
            ),
          ),
          Text(
            title ?? name,
            style: TextStyle(color: Color(0xffc9c9c9)),
          ),
          count != null
              ? Icon(Icons.play_arrow_outlined, color: Color(0xffc9c9c9))
              : Spacer(),
          count != null
              ? Text(
                  '$count',
                  style: TextStyle(color: Color(0xffc9c9c9)),
                )
              : Spacer(),
          Spacer(),
          inlineType != InlineType.recommond
              ? Icon(Icons.highlight_off, color: Color(0xffc9c9c9))
              : Spacer()
        ],
      ),
    );
  }
}

class FMItem extends StatelessWidget {
  const FMItem({
    Key key,
    @required this.width,
    @required this.cover1,
  }) : super(key: key);

  final double width;
  final String cover1;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      child: Column(
        children: [
          Container(
            width: width - 30,
            height: width - 30,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(cover1), fit: BoxFit.fill),
                borderRadius: BorderRadius.circular(150)),
          ),
          Text('私人FM'),
          Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Icon(
                  Icons.play_arrow_outlined,
                  color: Colors.grey,
                  size: 16,
                ),
                Text(
                  '999万',
                  style: TextStyle(color: Colors.grey, fontSize: 12),
                )
              ]),
        ],
      ),
    );
  }
}

class NormalItem extends StatelessWidget {
  const NormalItem({
    Key key,
    @required this.width,
    @required this.imageUrl,
    this.count = '0',
  }) : super(key: key);

  final double width;
  final String imageUrl;
  final String count;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width,
      child: Column(
        children: [
          Container(
            width: width,
            height: width,
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(imageUrl), fit: BoxFit.fill),
                borderRadius: BorderRadius.circular(3)),
            alignment: Alignment.bottomLeft,
            child: Container(
              margin: EdgeInsets.only(left: 5, right: 5, bottom: 5),
              child: Row(children: [
                Icon(
                  Icons.play_arrow_outlined,
                  color: Colors.white70,
                  size: 14,
                ),
                Expanded(
                  child: Text(
                    count,
                    style: TextStyle(color: Colors.white70, fontSize: 12),
                  ),
                ),
                Icon(
                  Icons.play_circle_outline,
                  color: Colors.white70,
                  size: 24,
                )
              ]),
            ),
          ),
          RecommondText('歌单啦啦啦啦啦啦啦啦啦')
        ],
      ),
    );
  }
}

class RecommondText extends Text {
  RecommondText(String data, {this.style}) : super(data);

  final TextStyle style;
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 3),
      height: 45,
      child: Text(data,
          maxLines: 2, overflow: TextOverflow.ellipsis, style: style),
    );
  }
}

/// @description: 每日推荐
class RecommondItem extends StatelessWidget {
  const RecommondItem({
    Key key,
    @required this.width,
    @required this.now,
  }) : super(key: key);

  final double width;
  final DateTime now;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        Navigator.of(context).pushNamed('/songSheet/123123');
      },
      child: Container(
        width: width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: width,
              height: width,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(3),
                color: Colors.black54,
                image: DecorationImage(
                    colorFilter:
                        ColorFilter.mode(Colors.black26, BlendMode.darken),
                    image: AssetImage('static/images/recommond_bg.jpg')),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text.rich(TextSpan(children: [
                    TextSpan(
                      text: '—',
                      style: TextStyle(fontSize: 24, color: Color(0xFF516367)),
                    ),
                    TextSpan(
                      text: ' ',
                      style: TextStyle(fontSize: 24),
                    ),
                    TextSpan(
                      text: '${now.day}',
                      style: TextStyle(fontSize: 24, color: Colors.white),
                    ),
                    TextSpan(
                      text: ' ',
                      style: TextStyle(fontSize: 24),
                    ),
                    TextSpan(
                      text: '—',
                      style: TextStyle(fontSize: 24, color: Color(0xFF516367)),
                    ),
                  ])),
                  Text(
                    '${monthEn[now.month - 1]}',
                    style: TextStyle(fontSize: 18, color: Color(0xFF89999d)),
                  ),
                  Text(
                    '每日推荐',
                    style: TextStyle(color: Colors.white70, fontSize: 18),
                  ),
                ],
              ),
            ),
            RecommondText(
              '每日为你精选好歌',
            )
          ],
        ),
      ),
    );
  }
}

class CommonTitle extends StatelessWidget {
  const CommonTitle({
    Key key,
    this.title,
    this.onTap,
  }) : super(key: key);
  final String title;
  final Function onTap;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      child: GestureDetector(
        onTap: this.onTap,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            Icon(
              Icons.keyboard_arrow_right,
              color: Colors.grey,
            )
          ],
        ),
      ),
    );
  }
}

class Banner {
  final String typeName;
  final String bgurl;
  Banner(this.typeName, this.bgurl);
}

List<Banner> bannerList = [
  Banner('歌单', 'static/images/header_bg.jpeg'),
  Banner('主播电台', 'static/images/header_bg2.jpeg'),
  Banner('小说', 'static/images/avator.jpeg'),
];

class Tab {
  final String title;
  final IconData icon;
  final String path;
  final Color color;

  Tab(this.title, this.icon, this.path, this.color);
}

List<Tab> tabsList = [
  Tab('歌手', Icons.face, '/singer', Colors.purple),
  Tab('排行榜', Icons.equalizer, '/singer', Colors.blue),
  Tab('分类·歌单', Icons.music_note, '/singer', Colors.pink),
  Tab('电台', Icons.radio, '/singer', Colors.orange[200]),
  Tab('唱歌', Icons.mic, '/singer', Colors.green),
];

List<String> monthEn = [
  'Jan.',
  'Feb.',
  'Mar.',
  'Apr.',
  'May.',
  'Jun.',
  'Jul.',
  'Aug.',
  'Sep.',
  'Oct.',
  'Nov.',
  'Dec.',
];
